<template>
  <div class="softwareVersionManage">
    <el-container>
      <!-- 顶部按钮及单车软件信息 -->
      <el-header>
        <!-- 顶部按钮及车辆筛选 -->
        <div class="topHeader">
          <el-button type="primary" icon="el-icon-plus" class="button1">信息录入</el-button>
<!--          todo 自定义导出图标   -->
          <el-button type="info" icon="el-icon-diy" class="button2">导出</el-button>

          <div style="float: right; margin-top: 24px;">
            <span class="selectorName">线路</span>
            <el-select v-model="lineSelected" placeholder="请选择">
              <el-option
                  v-for="item in lineOptions"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
            <span class="selectorName">车号</span>
            <el-select v-model="trainSelected" placeholder="请选择">
              <el-option
                  v-for="item in trainOptions"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
            <el-button type="primary" class="button3">查询</el-button>
          </div>
        </div>

        <!--软件信息表格-->
        <div class="softwareInfo">
          <!-- el-table 属性 -->
          <!-- highlight-current-row 高亮显示当前行 -->
          <el-table
              :data="systemSoftwareVersionData"
              style="width: 100%"
              highlight-current-row
              @row-click="changeSystem">
            <el-table-column
                prop="systemName"
                label="系统"
                width="82"
                align="center">
            </el-table-column>
            <el-table-column
                prop="currentSoftwareVersion"
                label="软件版本"
                width="228"
                align="center">
            </el-table-column>
            <el-table-column
                prop="softwareUpdateInfo"
                label="软件升级申请信息"
                width="160"
                align="center">
            </el-table-column>
            <el-table-column
                width="38"
                align="center">
              <template scope="scope">
                <div class="rightTriangle"></div>
              </template>
            </el-table-column>
          </el-table>

          <div style="height: 30px; line-height: 30px; padding-left: 12px;">
            升级进度: {{progressOfUpdating}}%
          </div>
        </div>

        <!-- 系统软件升级信息 -->
        <div class="softwareUpdateInfo" v-model="sysSoftwareUpdateInfo">
          <div class="softwareUpdateInfoRow1">
            <div class="timeInfoName">申请时间</div>
            <div class="timeInfoData">1{{systemSoftwareVersionData.applyTime}}</div>
          </div>
          <div class="softwareUpdateInfoRow1">
            <div class="timeInfoName">实际升级时间</div>
            <div class="timeInfoData">1{{systemSoftwareVersionData.updateTime}}</div>
          </div>
          <div class="softwareUpdateInfoRow1">
            <div class="timeInfoName">暂停时间</div>
            <div class="timeInfoData">1{{systemSoftwareVersionData.pauseTime}}</div>
          </div>
          <div class="softwareUpdateInfoRow1">
            <div class="timeInfoName">恢复刷新时间</div>
            <div class="timeInfoData">1{{systemSoftwareVersionData.restartTime}}</div>
          </div>
          <div class="softwareUpdateInfoRow2">
            <div class="timeInfoName">暂停原因</div>
            <div class="timeInfoData">1{{systemSoftwareVersionData.pauseReason}}</div>
          </div>
        </div>

      </el-header>

      <!-- 同线路车辆软件对比 -->
      <el-main style="padding: 0;">
        <!-- 标题 -->
        <div style="height: 62px;
                    font-size: 18px;
                    color: #eee;
                    line-height: 62px;
                    padding-left: 26px;
                    border-bottom: 1px solid #1C284B;">
          同线路车辆各系统软件版本对比
        </div>
        <!-- 同线路车辆对比表 -->
        <div class="softwareVersionOfLine">
<!--          todo 同线路软件对比表  -->
          <el-table
              :data="softwareVersionOfLine"
              style="width: 1633px; margin-bottom: 32px;">
            <el-table-column
                fixed
                prop="trainId"
                label="车号"
                width="175"
                align="center">
            </el-table-column>
            <el-table-column
                fixed
                prop="pms"
                label="受电弓"
                width="243"
                align="center">
            </el-table-column>
            <el-table-column
                fixed
                prop="atds"
                label="走行部"
                width="243"
                align="center">
            </el-table-column>
            <el-table-column
                fixed
                prop="aux"
                label="辅助系统"
                width="243"
                align="center">
            </el-table-column>
            <el-table-column
                fixed
                prop="tcms"
                label="控制系统"
                width="243"
                align="center">
            </el-table-column>
            <el-table-column
                fixed
                prop="tcu"
                label="牵引系统"
                width="243"
                align="center">
            </el-table-column>
            <el-table-column
                fixed
                prop="bcu"
                label="制动系统"
                width="243"
                align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "SoftwareVersionManage",
  data() {
    return {
      // 顶部按钮及选择器数据
      lineSelected: '',
      trainSelected: '',
      lineOptions: ['XX01', 'XX02'],
      trainOptions: ['XX01001', 'XX01002', 'XX01003'],
      // 软件升级进度
      progressOfUpdating: 56,
      // 系统软件信息数据
      systemSoftwareVersionData: [{
        systemName: '受电弓',
        currentSoftwareVersion: 'V1',
        softwareUpdateInfo: 'V2'
      }, {
        systemName: '走行部',
        currentSoftwareVersion: 'V1',
        softwareUpdateInfo: 'V2'
      }, {
        systemName: '辅助系统',
        currentSoftwareVersion: 'V1',
        softwareUpdateInfo: 'V2'
      }, {
        systemName: '控制系统',
        currentSoftwareVersion: 'V1',
        softwareUpdateInfo: 'V2'
      }, {
        systemName: '牵引系统',
        currentSoftwareVersion: 'V1',
        softwareUpdateInfo: 'V2'
      }, {
        systemName: '制动系统',
        currentSoftwareVersion: 'V1',
        softwareUpdateInfo: 'V2'
      }],
      // 当前系统
      currentSystem: null,
      // 系统软件升级信息
      sysSoftwareUpdateInfo: {
        'applyTime': '2021年8月13日 13:00',
        'updateTime': '2021年8月15日 10:00',
        'pauseTime': '2021年8月15日 13:00',
        'restartTime': '2021年8月15日 15:00',
        'pauseReason': '这是原因详细描述，这是原因详细描述，这是原因详细描述，' +
            '这是原因详细描述，这是原因详细描述，这是原因详细描述，这是原因详细描'
      },
      // todo 辅助系统名称
      softwareVersionOfLine: [{
        trainId: '01701843',
        pms: 'V1',    // 受电弓
        atds: 'V1',   // 走行部
        aux: 'V1',    // 辅助系统
        tcms: 'V1',   // 控制系统
        tcu: 'V1',    // 牵引系统
        bcu: 'V1'     // 制动系统
      }, {
        trainId: '01701845',
        pms: 'V1',    // 受电弓
        atds: 'V1',   // 走行部
        aux: 'V1',    // 辅助系统
        tcms: 'V1',   // 控制系统
        tcu: 'V1',    // 牵引系统
        bcu: 'V1'     // 制动系统
      }]
    }
  },
  methods: {
    changeSystem(row) {
      this.currentSystem = row.systemName;
      console.log(this.currentSystem)
    }
  }
}
</script>

<style>
/*系统软件信息表格样式*/
/*设置表头高度----修改表头单元格内边距实现*/
.softwareVersionManage .el-table__header th {
  padding: 8px 0;
}
/*表头样式*/
.softwareVersionManage .el-table__header th.el-table__cell{
  background-color: #0F172D;
  border-bottom: 1px solid #242F4F;
}
/*表格主体样式*/
.softwareVersionManage .el-table__body td.el-table__cell{
  padding: 11px 0;
  height: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0);
  border-bottom: 1px solid #242F4F;
}
/*表格主体背景色*/
.softwareVersionManage .el-table tr {
  background-color: #0F172D;
}
/*表格底部边线颜色*/
.softwareVersionManage .el-table::before {
  background-color: transparent;
}
/*表格主体每行鼠标悬浮时候的背景色*/
.softwareVersionManage .el-table__body tr:hover>td.el-table__cell {
  color: #2EA2F8;
  background-color: rgba(0, 100, 226, 0.1);
}
/*表格主体选中时的背景色*/
.softwareVersionManage .el-table__body tr.current-row>td {
  color: #2EA2F8;
  background-color: rgba(0, 100, 226, 0.1);
}
.softwareVersionManage .el-table__body tr.el-table__row.current-row td.el-table__cell{
  border-top: 1px solid #0081E2;
  border-bottom: 1px solid #0081E2;
}
.softwareVersionManage .el-table__body tr.el-table__row.current-row td.el-table__cell:first-of-type{
  border-left: 1px solid #0081E2;
}
.softwareVersionManage .el-table__body tr.el-table__row.current-row td.el-table__cell:last-of-type{
  border-right: 1px solid #0081E2;
}
/*画三角形*/
.softwareVersionManage .el-table__body tr.el-table__row.current-row .rightTriangle {
  border-style: solid;
  border-width: 5px 5px 5px 7px;
  border-color: transparent transparent transparent #2EA2F8;
  width: 0;
  height: 0;
}

/*同线路车辆软件对比表格样式*/
/*表格表头样式*/
.softwareVersionManage .softwareVersionOfLine .el-table__header th.el-table__cell{
  height: 48px;
  background-color: #131E3D;
  border-bottom: 1px solid #242F4F;
}
/*表格主体样式*/
.softwareVersionManage .softwareVersionOfLine .el-table__body td.el-table__cell{
  height: 48px;
  /*background-color: #0F172D;*/
  border-bottom: 1px solid #242F4F;
}
/*表格主体背景色*/
.softwareVersionManage .softwareVersionOfLine .el-table tr {
  background-color: #0F172D;
}
/*表格主体每行鼠标悬浮时候的背景色*/
.softwareVersionManage .softwareVersionOfLine .el-table__body tr.hover-row>td {
  background-color: #242F4F;
}
/*表格主体每行高度*/
.softwareVersionManage .softwareVersionOfLine .el-table__row {
  height: 56px;
}

/*表格底部边线颜色*/
.softwareVersionManage .softwareVersionOfLine .el-table__fixed::before {
  background-color: transparent;
}
</style>

<style scoped>
/*页面布局*/
.softwareVersionManage>.el-container {
  color: rgba(255, 255, 255, 0.6);
  width: 1680px;
}
.softwareVersionManage>.el-container>.el-header {
  height: 490px!important;
  padding: 0;
  margin-bottom: 12px;
  background-color: #13192C;
}
.softwareVersionManage>.el-container>.el-main {
  height: 483px;
  background-color: #13192C;
}

/*顶部按键及线路车号选择框样式*/
.softwareVersionManage>.el-container .topHeader {
  border-bottom: 1px solid #1C284B;
  padding-right: 24px;
}
.softwareVersionManage>.el-container .topHeader .el-button {
  height: 32px;
  font-size: 14px;
  padding: 0 16px;
  border: 0;
}
.softwareVersionManage>.el-container .topHeader>.el-button--primary {
  background-color: #0081E2;
}
.softwareVersionManage>.el-container .topHeader>.button1 {
  margin: 24px 0 24px 24px;
}
.softwareVersionManage>.el-container .topHeader>.button2 {
  margin-left: 20px;
  background-color: #37456C;
}
.softwareVersionManage .selectorName {
  margin-right: 12px;
}
.softwareVersionManage .el-select {
  margin-right: 20px;
}
/*右侧按钮边距*/
/*.softwareVersionManage>.el-container .topHeader> .el-button.el-button--primary.button3 {*/
/*  margin-right: 24px;*/
/*}*/

/*.el-icon-diy {*/
/*  background: url("");*/
/*  background-size: contain;*/
/*}*/

/*.el-icon-diy:before {*/
/*  content: 'diy';*/
/*  font-size: 20px;*/
/*  visibility: hidden;*/
/*}*/

/*系统软件信息表格样式*/
.softwareVersionManage .softwareInfo {
  float: left;
  width: 510px;
  margin-top: 22px;
  margin-left: 22px;
  border: 1px solid #242F4F;
}
/*详细软件升级信息*/
.softwareVersionManage .softwareUpdateInfo {
  float: left;
  width: 1090px;
  height: 357px;
  border: 1px solid #0081E2;
  margin-left: 33px;
  margin-top: 23px;
}
.softwareVersionManage .softwareUpdateInfo .softwareUpdateInfoRow1 {
  height: 47px;
  line-height: 47px;
  border-bottom: 1px solid #242F4F;
}
.softwareVersionManage .softwareUpdateInfo .softwareUpdateInfoRow2 {
  height: 166px;
  line-height: 166px;
}
.softwareUpdateInfo .timeInfoName {
  float: left;
  width: 16%;
  padding-left: 49px;
  background-color: rgba(0, 0, 0, 0.1);
}
.softwareUpdateInfo .timeInfoData {
  float: left;
  width: 84%;
  padding-left: 37px;
  background-color: rgba(0, 100, 226, 0.1);
}

/*同线路对比表*/
.softwareVersionOfLine {
  width: 1633px;
  margin-top: 22px;
  margin-left: 23px;
  margin-right: 23px;
}
</style>
